<template>
  <PageContainer>
    <view class="container">
      <Header title="已选名单" :is-box-shadow="false">
        <template>
          <SearchInput
            @search="search"
            @openDelAll="openDelAll"
            :showFilter="false"
            :showClear="isDisabled ? false : true"
          />
        </template>
      </Header>

      <view v-for="item in checkedUserList" :key="item.userId">
        <template v-if="keywordFilter(item)">
          <UserItem
            :userInfo="item"
            :showDel="isDisabled ? false : true"
            :showChecked="false"
            @openTips="openTips"
            @openDel="openDel"
          ></UserItem>
        </template>
      </view>

      <Empty v-if="!checkedUserList.length" />

      <TButtonGroup v-if="!isDisabled" position="fixed" :styles="{ backgroundColor: '#FFF' }">
        <TButton
          class="gutter-btn"
          custom-class="borderBtn"
          text="+添加联系人"
          @click="goSelectUserList"
        />
      </TButtonGroup>

      <ShowModal v-model="tipsShow" title="异常提示" :showCancel="false">
        <template #content>
          <view class="px-20 pb-20">
            <view
              v-for="(item, index) in tipsContent"
              :key="index"
              class="mt-15"
              style="color: #aaabab"
            >
              <text v-if="tipsContent.length > 1">{{ index + 1 }}、</text>
              <text>{{ item }}</text>
            </view>
          </view>
        </template>
      </ShowModal>

      <ShowModal
        v-model="delUserShow"
        title=""
        :content="`确定要将 ${delUserObj.userName} 移出发送名单吗？`"
        confirm-text="移除名单"
        @confirm="confirmDel"
      ></ShowModal>

      <ShowModal
        v-model="delAllUserShow"
        title=""
        content="确定要一键清空所有名单所有人吗？"
        confirm-text="确定清空"
        @confirm="confirmDelAll"
      ></ShowModal>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* selectedUserList 已选名单  */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import SearchInput from '../components/searchInput.vue';
  import UserItem from '../components/userItem.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { ref, unref, computed } from 'vue';
  import type { MsgUserData, SearchUserData } from '@/api/admin/types';
  import { useAdminStoreWithOut } from '@/store/modules/admin';
  import Empty from '@/components/Empty/Empty.vue';
  import { navigateTo, onLoad } from '@/router';

  const useAdmin = useAdminStoreWithOut();
  // 已选择的用户列表
  const checkedUserList = computed(() => {
    return useAdmin.checkedUserList;
  });

  // 关键词查询
  const keyword = ref<string>();
  const search = (e: SearchUserData) => {
    keyword.value = e.keyword;
  };
  const keywordFilter = (item: MsgUserData): boolean => {
    if (unref(keyword)) {
      if (item.userName.includes(unref(keyword) as string)) {
        return true;
      } else if (item.phone && item.phone.includes(unref(keyword) as string)) {
        return true;
      } else if (item.companyName && item.companyName.includes(unref(keyword) as string)) {
        return true;
      }
      return false;
    }
    return true;
  };

  // 弹出异常提示框
  const tipsShow = ref(false);
  const tipsContent = ref<string[]>([]);
  const openTips = (list: string[]) => {
    tipsContent.value = list;
    tipsShow.value = true;
  };
  // 移除单个用户
  const delUserShow = ref(false);
  const delUserObj = ref({} as MsgUserData);
  const openDel = (userInfo: MsgUserData) => {
    delUserShow.value = true;
    delUserObj.value = userInfo;
  };
  const confirmDel = () => {
    useAdmin.checkedUserList = useAdmin.checkedUserList.filter((v) => {
      return v.userId !== unref(delUserObj).userId;
    });
  };
  // 移除所有已选用户
  const delAllUserShow = ref(false);
  const openDelAll = () => {
    delAllUserShow.value = true;
    delUserShow.value = false;
  };
  const confirmDelAll = () => {
    useAdmin.checkedUserList = [];
  };

  const dataSource = ref();
  const objectId = ref();
  const isDisabled = ref(false); // 是否禁止操作
  onLoad((op) => {
    if (op.dataSource) {
      dataSource.value = op.dataSource;
      objectId.value = op.objectId;
      isDisabled.value = op.disabled ?? false;
    }
  });
  const goSelectUserList = () => {
    navigateTo({
      name: 'selectUserList',
      options: { dataSource: unref(dataSource), objectId: unref(objectId) },
    });
  };
</script>

<style lang="scss" scoped></style>
